<template>
  <div>
<!--    面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

<!--    卡片区域-->
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
<!--          v-model="queryInfo.query"-->
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="queryInfo.query">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getAllUser">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUserVisible=true">添加用户</el-button>
        </el-form-item>
      </el-form>

<!--      表格,border加边框，stripe加隔行变色,:data="userList"数据在这里-->
      <el-table
        border
        stripe
        :data="userList"
        style="width: 100%">
<!--         type="index"索引值自动从1开始-->
        <el-table-column
          type="index">
        </el-table-column>
        <el-table-column
          prop="username"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="角色">
        </el-table-column>
<!--        子组件使用父组件数据，使用插槽-->
        <el-table-column
          prop="mg_state"
          label="状态">
          <template  v-slot="mySlot">
            <el-switch
              v-model="mySlot.row.mg_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="userStatusChange(mySlot.row)">

            </el-switch>


<!-- 插槽，必须有一个跟组件，所以放到div里面，要写 {{mySlot.row}}才能看到{ "username": "tige117", "mobile": "18616358651",
"email": "tige112@163.com", "mg_state": true, "role_name": "炒鸡管理员" }，
最后 v-model="mySlot.row.mg_state"数据双向绑定后台的mg_state值-->
<!--            <div>-->
<!--              {{mySlot.row}}-->
<!--            </div>-->
          </template>
        </el-table-column>
<!--       width="200px"因为最后一行宽度有点放不下，单独设置了个宽度  -->
        <el-table-column
          width="200px"
          prop="mg_state"
          label="操作">
          <template v-slot="mySlot">
<!--            编辑-->
            <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
              <el-button @click="editDialog(mySlot.row.id)" type="primary" icon="el-icon-edit" circle></el-button>
            </el-tooltip>
              <!--           删除-->
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button @click="delDialog(mySlot.row)" type="danger" icon="el-icon-delete" circle></el-button>
            </el-tooltip>
              <!--            设置-->
            <el-tooltip class="item" effect="dark" content="分配角色" placement="top-start">
              <el-button @click="role(mySlot.row.id)" type="danger" icon="el-icon-setting" circle></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
<!--      分页  :page-sizes="[2, 5, 10, 20]"/>下拉框可以选择每页显示2, 5, 10, 20条
  :current-page="queryInfo.pagenum"当前页
   :page-size="queryInfo.pagesize"每页几条
  -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

<!--点击添加用户弹出的表单-->
      <el-dialog title="添加用户" v-model="addUserVisible" width="50%" >
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username">
            <el-input  v-model="ruleForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input  v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input  v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input  v-model="ruleForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="addUser('ruleForm')">确 定</el-button>
          </span>
        </template>
      </el-dialog>

<!--      删除按钮的弹出框-->
      <el-dialog
        title="提示"
        v-model="delDialogVisible"
        width="50%"
        center>
        <span>您确定要删除  {{userName}} 用户吗？</span>
        <template #footer>
           <span  class="dialog-footer">
            <el-button @click="delDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="del">确 定</el-button>
          </span>
        </template>
      </el-dialog>

<!--      编辑按钮的弹出框-->
      <el-dialog title="编辑" v-model="editDialogVisible" width="50%">
   <el-form :model="updateForm"  status-icon :rules="rules" ref="updateForm" label-width="70px" class="demo-ruleForm">
          <el-form-item label="用户名" prop="username" >
            <el-input  v-model="updateForm.username" disabled ></el-input>
          </el-form-item>
         <el-form-item label="邮箱" prop="email">
           <el-input  v-model="updateForm.email"></el-input>
         </el-form-item>
         <el-form-item label="电话" prop="mobile">
           <el-input  v-model="updateForm.mobile" ></el-input>
         </el-form-item>
        </el-form>
        <template #footer>
           <span  class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="edit()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
name: "users.vue",
  data(){
    return{
      currentPage4: 4,//当前页第4页，4的数字会高亮
      userList:[],
      queryInfo:{
        query:'',//就是搜索框的内容
        pagenum:1,//当前页码，第一页
        pagesize:5//每页几条
      },
      total:0,//总页数,
      addUserVisible:false,
      delDialogVisible:false,//删除按钮的,
      editDialogVisible:false,//编辑按钮的
      ruleForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      updateForm:{

      },
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' }
        ]
      },
      userId:0,
      userName:''
    }
  },
  created() {//启动的时候就运行
    this.getAllUser();//获取所有的用户数据
  },
  methods: {
    //注意如果只写了一个空函数，里面什么操作都没写，会报错，所以可以先写个console.log(id);
    //编辑
    getAllUser() {
      //文档的：请求路径：users- 请求方法：get，query：查询参数
      // | pagenum：当前页码pagesize ： 每页显示条数
      //
      this.axios.get('users', {
        params: this.queryInfo
      }).then(data => {
        console.log(data);
        if (data.data.meta.status !== 200) return ElMessage.error(data.data.meta.msg);
        this.userList = data.data.data.users;
        this.total = data.data.data.total;
        }
      ).catch(err => {
        console.log(err);
      })
    },
    editDialog(id) {
      this.editDialogVisible=true;
      this.userId=id;
      this.axios.get(`users/${this.userId}`).then(resp=>{
        this.updateForm=resp.data.data;
      }).catch(err=>{
        console.log(err);
      })
    },
    edit(){
      this.axios.put(`users/${this.userId}`,{
        email:this.updateForm.email,
        mobile:this.updateForm.mobile
      }).then(resp=>{
        if (resp.data.meta.status !== 200) return ElMessage.error(data.data.meta.msg);
        ElMessage.success("修改成功");
        this.editDialogVisible=false;
        this.getAllUser();
      }).catch(err=>{
        console.log(err);
      })
    },
    //删除
    delDialog(row) {

      this.userId=row.id;//点击删除，传过来了此行的id,放到userId里面存，其他的使用userId就行
      this.userName=row.username;
      this.delDialogVisible=true;

    },
    del(){
      this.axios.delete(`users/${this.userId}`).then(resp=>{
        console.log(resp);
        if(resp.data.meta.status!==200) return ElMessage.error("删除失败");
        ElMessage.success("删除成功");
        this.delDialogVisible=false;
        //重新刷新用户列表
        this.getAllUser();
      }).catch(err=>{
        console.log(err);
      })
    },
    //设置
    role(id) {
      console.log(id)
    },
    //分页的
    handleSizeChange(val) {
      this.queryInfo.pagesize=val;
      this.getAllUser();
    },
    //分页的
    handleCurrentChange(val) {
      this.queryInfo.pagenum=val;
      this.getAllUser();
    },
    //弹出框点击×
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.addUserVisible = false;
    },
    addUser(formName){
      this.axios.post('users',this.ruleForm).then(data=>{
        console.log(data);
        if(data.data.meta.status!==201) return ElMessage.error('添加失败');
        ElMessage.success("添加成功");
        this.getAllUser();
        this.resetForm(formName);
      }).catch(err=>{
        console.log(err);
      })
    },
    userStatusChange(row){//设置状态按钮
      this.axios.put(`users/${row.id}/state/${row.mg_state}`).then(resp=>{
        ElMessage.success(resp.data.meta.msg);
      }).catch(err=>{
        console.log(err);
      })
    }

  }
}
</script>

<style scoped>
/*
面包屑的
*/
.el-breadcrumb{
  font-size: 20px;

}
.box-card{
  margin-top: 20px;
}
.el-pagination{
  margin-top: 20px;
}
</style>
